$(document).ready(function () {
  var speed = 500         // fade speed
  var autoswitch = true   // auto slider options
  var autoswitch_speed = 4000 // auto slider speed

  // add initial active class
  $('.slide').first().addClass('active')

  // Hide all slides
  $('.slide').hide()

  // show first slide
  $('.active').show()


  $('#next').on('click', nextSlide)

  $('#prev').on('click', prevSlide)

  if (autoswitch === true) {
    setInterval(nextSlide, autoswitch_speed)
  }

  // switch to next slide - otimizando
  function nextSlide() {
    $('.active').removeClass('active').addClass('oldActive')
    // se for o ultimo slide - last-child
    if ($('.oldActive').is(':last-child')) {
      $('.slide').first().addClass('active')
    } else {
      $('.oldActive').next().addClass('active')
    }
    $('.oldActive').removeClass('oldActive')
    $('.slide').fadeOut(speed)
    $('.active').fadeIn(speed)
  }

  function prevSlide() {
    // ao licar em next
    $('.active').removeClass('active').addClass('oldActive')
    // se for o primeiro slide - first-child
    if ($('.oldActive').is(':first-child')) {
      $('.slide').last().addClass('active')
    } else {
      $('.oldActive').prev().addClass('active')
    }
    $('.oldActive').removeClass('oldActive')
    $('.slide').fadeOut(speed)
    $('.active').fadeIn(speed)
  }

})